import { useIntersectionObserver } from '@vueuse/core'

export const lazyPlugin = {
    install(app){
        //实现懒加载（采用函数式）
        app.directive('img-lazy',(el,{value}) => {
        //el:指令绑定元素
        //binding.value 指令=后面表达式的值 图片url
            const { stop } = useIntersectionObserver(
                el,
                ([{ isIntersecting }]) => {
                    if(isIntersecting){
                        el.src = value
                        stop();  //如果懒加载过一次，就不要再重复执行了
                    }
                },
            )
        })
    }
}




